<template>
  <w-combobox :multiple="true" :picker="picker" :dropper="clickDropper" :drop-width="400" @input="suggestOnline"
    @keydown.up.down="keyChoose" @keydown.enter="keyEnter" @click:item="clickItem">
    <w-horizontal v-if="loading" align="center" valign="middle" height="32">
      <w-img src="#f-svg-loading" text="正在加载" :vertical="false"></w-img>
    </w-horizontal>
    <template v-else>
      <w-table :scroll-x="true">
        <w-columns>
          <w-column width="*" />
          <w-column width="100" />
        </w-columns>
        <w-tbody :current="current">
          <w-tr v-for="item in suggestList" :key="item.id" @click="clickAdd($event, item)">
            <w-td>{{item.name}}</w-td>
            <w-td>{{item.dept}}</w-td>
          </w-tr>
        </w-tbody>
      </w-table>
      <w-pagebar v-if="showPage" offset="0" limit="10" size="100" @click:item="clickPage" face="mini" height="35"
        align="right"></w-pagebar>
    </template>
  </w-combobox>
</template>

<script>
  import $ from '../../dfish.js'

  export default {
    props: ['modelValue'],
    data() {
      return {
        loading: false,
        suggestList: [],
        tableList: [],
        source: null,
        showPage: false,
        current: null,
        currentIndex: null,
        picker: {
          type: 'Dialog',
          template: 'task/TaskForm',
          class: 'large'
        }
      }
    },
    watch: {
      modelValue(v) {
        //console.log(v)
      }
    },
    methods: {
      suggest(event, value) {
        this.showPage = false
        this.suggestList = this.tableList.filter(v => v.name.includes(value))
      },
      suggestOnline(event, value) {
        if (this.source) {
          this.source.cancel()
        }
        this.source = $.ajax.CancelToken.source()
        this.loading = true
        $.ajax.get('widget.php?act=suggest&q=' + $.urlEncode(value), {
            cancelToken: this.source.token
          })
          .then(data => {
            this.suggestList = data.content
            this.loading = false
            this.current = null
            this.currentIndex = null
          })
      },
      clickAdd(event, item) {
        $(this).complete({
          value: item.id,
          text: item.name
        })
        $.close(event)
      },
      clickItem(event, item) {
        console.log(item)
      },
      keyChoose(event) {
        if (!this.loading && this.suggestList && this.suggestList.length) {
          let idx = this.currentIndex
          if (idx == null) idx = -1
          idx += event.keyCode == 38 ? -1 : 1
          if (idx < 0) {
            idx = this.suggestList.length - 1
          } else if (idx > this.suggestList.length - 1) {
            idx = 0
          }
          this.current = this.suggestList[idx].id
          this.currentIndex = idx
        }
      },
      keyEnter() {
        if (this.currentIndex != null) {
          let item = this.suggestList[this.currentIndex]
          $(this).complete({
            value: item.id,
            text: item.name
          }).closeDrop()
        }
      },
      clickDropper() {
        this.showPage = true
        this.suggestList = [{
            id: '001',
            name: '擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱',
            dept: '史前地球'
          },
          {
            id: '002',
            name: '威震天',
            dept: '塞伯坦星'
          },
          {
            id: '003',
            name: '大黄蜂',
            dept: '塞伯坦星'
          },
        ]
      },
      clickPage(e, page) {
        console.log(page)
      }
    },
    mounted() {
      this.tableList = [{
          id: '001',
          name: '擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱擎天柱',
          dept: '史前地球'
        },
        {
          id: '002',
          name: '威震天',
          dept: '塞伯坦星'
        },
        {
          id: '003',
          name: '大黄蜂',
          dept: '塞伯坦星'
        },
      ]
      if (typeof this.modelValue === 'string') {
        let vs = this.modelValue.split(',')
        let r = []
        vs.forEach(v => {
          let d = this.tableList.find(data => data.id == v)
          d && r.push({
            value: d.id,
            text: d.name,
            forbid: !true
          })
        })
        $(this).val(r)
      }
    },
  }
</script>
